//
// DISCLAIMER:
// Do not change this file because it is core styling.
// Customizing core files will make updating Atlas much more difficult in the future.
// To customize any core styling, copy the part you want to customize to styles/web/sass/app/ so the core styling is overwritten.
//

@mixin data-grid-helpers() {
    /* ==========================================================================
       Data grid default

    //== Design Properties
    //## Helper classes to change the look and feel of the component
    ========================================================================== */
    // Striped style
    .datagrid-striped.mx-datagrid {
        table {
            th {
                border-width: 0;
            }

            tbody tr {
                td {
                    border-top-width: 0;
                }

                &:nth-child(odd) td {
                    background-color: $grid-bg-striped;
                }
            }
        }
    }

    // Bordered style
    .datagrid-bordered.mx-datagrid {
        table {
            border: 1px solid;

            th {
                border: 1px solid $grid-border-color;
            }

            tbody tr {
                td {
                    border: 1px solid $grid-border-color;
                }
            }
        }

        tfoot {
            > tr > th {
                border-width: 0;
                background-color: $grid-footer-bg;
            }

            > tr > td {
                border-width: 1px;
            }
        }
    }

    // Transparent style so you can see the background
    .datagrid-transparent.mx-datagrid {
        table {
            background-color: transparent;

            tbody tr {
                &:nth-of-type(odd) {
                    background-color: transparent;
                }

                td {
                    background-color: transparent;
                }
            }
        }
    }

    // Hover style activated
    .datagrid-hover.mx-datagrid {
        table {
            tbody tr {
                &:hover td {
                    background-color: $grid-bg-hover !important;
                }

                &.selected:hover td {
                    background-color: $grid-bg-selected-hover !important;
                }
            }
        }
    }

    // Datagrid Row Sizes
    .datagrid-lg.mx-datagrid {
        table {
            th {
                padding: ($grid-padding-top * 2) ($grid-padding-right * 2) ($grid-padding-bottom * 2)
                    ($grid-padding-left * 2);
            }

            tbody tr {
                td {
                    padding: ($grid-padding-top * 2) ($grid-padding-right * 2) ($grid-padding-bottom * 2)
                        ($grid-padding-left * 2);
                }
            }
        }
    }

    .datagrid-sm.mx-datagrid {
        table {
            th {
                padding: ($grid-padding-top / 2) ($grid-padding-right / 2) ($grid-padding-bottom / 2)
                    ($grid-padding-left / 2);
            }

            tbody tr {
                td {
                    padding: ($grid-padding-top / 2) ($grid-padding-right / 2) ($grid-padding-bottom / 2)
                        ($grid-padding-left/ 2);
                }
            }
        }
    }

    // Datagrid Full Search
    // Default Mendix Datagrid Widget with adjusted search field. Only 1 search field is allowed
    .datagrid-fullsearch.mx-grid {
        .mx-grid-search-button {
            @extend .btn-primary;
        }

        .mx-grid-reset-button {
            display: none;
        }

        .mx-grid-search-item {
            display: block;
        }

        .mx-grid-search-label {
            display: none;
        }

        .mx-grid-searchbar {
            .mx-grid-search-controls {
                position: absolute;
                right: 0;
            }

            .mx-grid-search-input {
                width: 80%;
                padding-left: 0;

                .btn,
                .form-control {
                    height: 35px;
                    font-size: 12px;
                }
            }
        }
    }
}
